import "./index.less"
import checkImg from '@/assets/images/user/choice_me.png'
import React, { useState } from 'react'
import { QuestionTypeKey } from "@/utils/constant"
import { Button } from "@mui/material"
import { useToast } from "@/hooks/toast"
interface IProp {
    data: IPracticeItem
}

export default function Choice({ data }: IProp) {
    const toast = useToast()
    // 现在需要一个 题目选项的 数组 ， 从data 里面得到的 是个 JSON字符串 ,需要转换为 js数组
    const options = JSON.parse(data.optionContent) as IQuestionType[]
    // 我们需要一个数组把 选中的答案的 序号 存起来
    // ['A','B','C']
    const [useChooceAnswer, setAnswer] = useState<string[]>([])

    // 点击勾选的操作
    const clickToCheck = (key: string) => {
        // 分开处理：
        if (data.questionType === 'many') {
            // 如果是多选
            // 如果数组里面已经有了，就是要删除
            let idx = useChooceAnswer.indexOf(key)
            if (idx !== -1) {
                useChooceAnswer.splice(idx, 1)
                setAnswer([...useChooceAnswer])
            } else {
                // 如果数组里面没有这个答案，就放进去
                setAnswer([...useChooceAnswer, key])
            }
        } else {
            // 如果是单选 ， 就把数组里面的数据变成谁
            setAnswer([key])
        }


    }

    const submitFn = () => {
        // 显示答案
        // 判断答案是否正确
        // 拿 用户选择的答案 去和 题目本身提供的答案进行对比
        // 一定要记得 答案数组先排序再转换为字符串比较
        if (useChooceAnswer.sort().join(',') === data.answer) {
            toast('回答正确')
        } else {
            toast('回答错误', "error")
        }
        // 提交给服务器
    }
    return (
        <div className="choice">
            <div className="top-title">
                <div className="type">{QuestionTypeKey[data.questionType]}</div>
                <div className="title">{data.title}</div>
            </div>
            <ul className="opt-list">
                {
                    options.map(item => <li key={item.key} onClick={() => clickToCheck(item.key)}>
                        <div className="check">
                            <img src={checkImg} alt="" style={{ display: useChooceAnswer.includes(item.key) ? 'block' : 'none' }} />
                        </div>
                        <div className="order">{item.key}</div>
                        <div className="content">{item.value}装</div>
                    </li>)
                }
            </ul>
            <div>
                <Button variant="outlined" onClick={submitFn}>确定</Button>
            </div>
        </div>
    )
}
